<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>粮仓测控数据详情</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../css/bootstrap-switch.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/square_detail.css"/>
    <link rel="stylesheet" href="../css/square_historydata.css"/>
    <style>
        .loadpagediv {
            display: none;
            position: absolute;
            top: 0;
            left: 60px;
            width: 960px;;
            height: 525px;
        }

        .mask {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #dddddd;
            opacity: 0.7;
        }

        .load_gif {
            margin: 0 auto;
            margin-top: 210px;
        }
    </style>
</head>
<body>
<div class="aside lf">
    <ul>
        <li class="granary_model active">
            <em></em>
            <a href="javascript:void(0);">模<br/>型</a>
        </li>
        <li class="table_data">
            <em></em>
            <a href="javascript:void(0);">表<br/>格</a>
        </li>
        <li class="curve_graph">
            <em></em>
            <a href="javascript:void(0);">曲<br/>线</a>

            <div id="loadpagediv" class="loadpagediv">
                <div class="mask">
                    <img src="../images/loading.gif" alt="" class="load_gif"/><br/>页面加载中...请稍后...
                </div>
            </div>
        </li>
    </ul>
</div>
<div id="top_box">
    <div id="model_box" class="lf"></div>

    <!--右侧粮仓信息等-->
    <div class="top_right">
        <div class="granary_info">
            <fieldset>
                <legend>粮仓信息:</legend>
                <ul>
                    <li class="acquisition_cycle">
                        <em></em>
                        <a href="javascript:void(0);">采集周期：</a>
                        <span>1</span>
                    </li>
                    <li class="granary_num">
                        <em></em>
                        <a href="javascript:void(0);">粮仓编号：</a>
                        <span>1</span>
                    </li>
                    <li class="slave_ID">
                        <em></em>
                        <a href="javascript:void(0);">从机编号：</a>
                        <span>1</span>
                    </li>
                    <li class="granary_type">
                        <em></em>
                        <a href="javascript:void(0);">粮仓类型：</a>
                        <span>圆筒仓</span>
                    </li>
                    <li class="measuring_num">
                        <em></em>
                        <a href="javascript:void(0);">测点数量：</a>
                        <span>0250</span>
                    </li>
                    <li class="high_temperature">
                        <em></em>
                        <a href="javascript:void(0);">高温阈值：</a>
                        <span>40℃</span>
                    </li>
                    <li class="low_temperature">
                        <em></em>
                        <a href="javascript:void(0);">低温阈值：</a>
                        <span>-20℃</span>
                    </li>
                </ul>
            </fieldset>
        </div>
        <div class="collect_data clearfloat">
            <a href="#" class="excel lf">导出报表</a>
            <a href="#" class="manual lf">手动采集</a>
        </div>
        <!--三个报警按钮-->
        <div class="warning text-center">
                <div class="switch" data-on="primary" data-off="info" data-size="mini" id="mySwitch">
                    <input type="checkbox" name='my-checkbox' checked />&nbsp;&nbsp;报警开关
                </div>
            <a class="failure_warning btn" href="javascript:void(0);">故障报警</a>
            <a class="low_temperature_warning btn" href="javascript:void(0);">低温报警</a>
            <a class="high_temperature_warning btn" href="javascript:void(0);">高温报警</a>
        </div>
    </div>
</div>
<div id="bottom_box">
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <span class="pull-left query">历史数据查询条件</span>

            <form id="formSearch" class="form-horizontal pull-right">
                <div class="form-group">
                    <label class="control-label col-md-2" for="txt_search_name">仓库名称</label>

                    <div class="col-md-3">
                        <input type="text" class="form-control" id="txt_search_name">
                    </div>
                    <label class="control-label col-md-2" for="txt_search_statu">查询周期</label>

                    <div class="col-md-3">
                        <input type="text" class="form-control" id="txt_search_statu">
                    </div>
                    <div class="col-md-2" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-default">查询
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <table id="reportTable"></table>
    </div>

</div>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-switch.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/square_detail.js"></script>
<script>
    $("[name='my-checkbox']").bootstrapSwitch({
                onSwitchChange:function(event,state){
                    if(state==true){
                        $(this).val("1");
                    }else{
                        $(this).val("2");
                    }
                }
            });
</script>
</body>
</html>